<template>
  <div class="parent">
    <h3>teleport演示</h3>
    <hr>
    <h3>父组件</h3>
    <br>
    <child></child>
  </div>

  <hr>
  <p>
    注意:<br>
    &nbsp;&nbsp;对于全屏模式的组件如模态对话框而言,很多时候希望显示在屏幕或父组件的正中央,但同时并不希望撑开父组件,这时候快速定位就很难通过css来处理.<b>teleport</b>可以很方便地应用此类场景.<br>
    &nbsp;&nbsp;官方文档: <a href="https://v3.cn.vuejs.org/guide/teleport.html"><b>teleport</b></a>
  </p>
</template>

<script>
import child from './child.vue'

export default {
  components: {
    child
  },
}
</script>

<style scoped>
  .parent {
    background-color: #8ae;
    padding: 10px;
  }
</style>